import React, { useState } from "react";
import { Form, Input, Button, DotLoading } from "antd-mobile";
import "./index.scss";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import { useUserStore } from "../../store/user";
import { IUserParams } from "../../type/course";
import { useNavigate, useLocation } from "react-router-dom";
import qs from "query-string";

export default () => {
  const [visible, setVisible] = useState(false);
  const { userLoginAsync, loading } = useUserStore((state) => state);
  const navigate = useNavigate();
  const { search } = useLocation();
  const handleLogin = (values: IUserParams) => {
    let { target } = qs.parse(search);
    // console.log(values, search, target);
    userLoginAsync(values, navigate, target as string);
  };
  const initialValues = {
    username: "富贵",
    password: "123",
  };
  return (
    <>
      <Form
        layout="horizontal"
        onFinish={handleLogin}
        initialValues={initialValues}
        footer={
          <Button
            block
            type="submit"
            color="primary"
            size="large"
            disabled={loading}
          >
            {loading ? <DotLoading /> : "登录"}
          </Button>
        }
      >
        <Form.Item label="用户名" name="username">
          <Input placeholder="请输入用户名" clearable />
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          extra={
            <div className="eye">
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
        >
          <Input
            placeholder="请输入密码"
            clearable
            type={visible ? "text" : "password"}
          />
        </Form.Item>
      </Form>
    </>
  );
};
